<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨澎锴的作业实践20——D3</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.min.js"></script>
  </head>
  <body>
    <h2>用d3生成svg</h2>
    <script>
      var w = 500;
      var h = 100;
      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      var dataset = [5, 10, 15, 20, 25];
      var circles = svg
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle");

      circles
        .attr("cx", function (d, i) {
          return i * 50 + 25;
        })
        .attr("cy", h / 2)
        .attr("r", function (d) {
          return d;
        });
      //   var w = 500;
      //   var h = 50;
      //   var svg = d3
      //     .select("body")
      //     .append("svg")
      //     .attr("width", w)
      //     .attr("height", h);

      //   var dataset = [5, 10, 15, 20, 25];
      //   var circles = svg
      //     .selectAll("circle")
      //     .data(dataset)
      //     .enter()
      //     .append("circle");

      //   circles
      //     .attr("cx", function (d, i) {
      //       return i * 50 + 25;
      //     })
      //     .attr("cy", h / 2)
      //     .attr("r", function (d) {
      //       return d;
      //     });
    </script>
  </body>
</html>
